<template>
	<view>
		<view class="no-leave" v-if="leaveList.length == 0">
			暂无请假
		</view>
		<view class="has-leave" v-else>
			<view class="notice-content" v-for="(item,index) in leaveList" :key="index">
					     <view class="nc-top">
					     	<view class="notice-title">
					     		请假课程：{{item.courseName}}
					     	</view>
					     	<view class="">
					     		请假类型：<text style="color: red;">{{item.type == 0?'事假' : '病假'}}</text> 
					     	</view>
					     </view>
						<view class="notice-time">
							请假时间：{{item.askLeaveDate}}
						</view>
						<view class="notice-time">
							请假原因：{{item.content}}
						</view>
					
			</view>
		</view>
		<view class="leave-btn">
			<view class="lb-content" @click="leaveBtn">我要请假</view>
		</view>
	</view>
</template>

<script>
	import {traineeAskLeaveList} from '@/utils/api.js'
	export default {
		data() {
			return {
				leaveList:[]
			}
		},
		onLoad() {
			this.traineeAskLeaveList()
		},
		onShow() {
			if(uni.getStorageSync('loading')) {
				uni.removeStorageSync('loading')
				this.traineeAskLeaveList()
			}
		},
		methods: {
			leaveBtn(){
				uni.navigateTo({
					url: '/pages/my/leaveRequest'
				})
			},
			async traineeAskLeaveList(){
				uni.showLoading()
				const data = {
					pageSize:999,
					pageNum:1,
				}
				const {code,rows} = await traineeAskLeaveList(data)
				
				if(code == 200){
					uni.hideLoading()
					 this.leaveList = rows
				}
			
			},
		}
	}
</script>

<style>
.no-leave{
	text-align: center;
	color: #6c6c6c;
	margin-top: 200rpx;
}
.leave-btn{
	width: 100%;
	
	position: fixed;
	bottom: 0;
	background-color: #fff;
}
.lb-content{
	width: 90%;
	height: 100rpx;
	margin: 20rpx auto;
	text-align: center;
	line-height: 100rpx;
	background-color: #417bf0;
	color: #fff;
	border-radius: 50rpx;
	font-size: 30rpx;
	letter-spacing: 2rpx;
}
.nc-top{
	display: flex;
	justify-content: space-between;
}
.notice-content{
	display: block;

	align-items: center;
	padding:  0 20rpx;
	width: 95%;
	margin: 20rpx auto;
	background: #ffffff;
	border-radius: 16rpx;
	position: relative;
	padding: 20rpx;
}
.notice-left{
	margin-top: 30rpx;
}
.notice-title{
	font-weight: bold;
}
.notice-time{
margin-top: 20rpx;
		width: 400rpx;
		overflow: hidden;
		white-space: nowrap;
		
		text-overflow: ellipsis;
}
.notice-right{
	
}

</style>
